<template>
  <div>
    <van-cell icon="search" v-for="(item, index) in list" :key="index" @click="$emit('search', item)">
      <span v-html="highLight(item)" slot="title"></span>
    </van-cell>
  </div>
</template>

<script>
// 方式3-防抖,手写能够及格防抖
import { getSuggestion } from '@/api/search.js'
function debounce (callback, num) {
  // 闭包,延长的timer的生命周期
  let timer = null
  // 高阶函数,一个函数返回另外一个函数
  return function (val) {
    const that = this
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      // 使用call/bind/apply改变this执行
      callback.call(that, val)
    }, num)
  }
}
// import { debounce } from 'lodash'
export default {
  name: 'SearchSuggestion',
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      list: [],
      timer: null
    }
  },
  components: {},
  // 生命周期:vue实例从生到死过程
  // 钩子函数:vue实例从生到死过程中,给了我们机会来执行我们的代码
  async created () {
    // 初始化完成,data,methods,computed,初始完成

  },
  watch: {
    searchText: {
      // 方式1-防抖,手写防抖(不及格版本)
      /*
      handler (val) {
        if (this.timer) clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
          const res = await getSuggestion(val)
          this.list = res.data.data.options
        }, 500)
      },
      */
      handler: debounce(async function (val) {
        const res = await getSuggestion(val)
        if (res.data.data.options[0] === null) {
          this.list = []
        } else {
          this.list = res.data.data.options
        }
      }, 500),
      // 方式2-防抖,使用工具
      immediate: true
    }
  },
  mounted () {
    // 挂载完成,数据和模板结合放到页面上

  },
  methods: {
    highLight (item) {
      // console.log('item', item)
      return item.replace(new RegExp(this.searchText, 'gi'), '<span style="color: #3296fa;">' + this.searchText + '</span>')
    }
  }
}
</script>

<style lang="less" scoped>

</style>
